﻿<div class="row-fluid page-content">
    <div id="page-inner">
        <div class="row">
            <div class="col-md-12">
                <div class="page-head-line location">
                    <span>位置：</span>
                    <ul>
                        <li><a href="/">首页</a></li>
                        <li>信息维护</li>
                        <li>服务类别</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="toolbar">
                    <div class="form-inline" role="form">
                        <div class="form-group col-md-5">
                            <div class="input-group">
                                <span class="input-group-addon">服务类别: </span>
                                <input name="Name" type="text" class="form-control query-name" />
                            </div>
                        </div>
                        <div class="form-group col-md-7">
                            <div class="input-group">
                                <button class="query btn btn-primary"><i class="fa fa-search fa-lg"></i>查 询</button>
                                <button class="add btn btn-default"><span class="add"></span>增 加</button>
                                <button class="delete btn btn-default"><span class="delete"></span>删 除</button>
                            </div>
                        </div>
                    </div>
                </div>
                <table id="categoryViewTable" class="myTable"></table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">服务类别信息</h4>
                </div>
                <div class="modal-body">
                    <div class="panel panel-info">
                        <div class="panel-body">
                            <form id="editForm" role="form" action="">
                                <input name="Id" class="Id" type="hidden" />
                                <input class="cls-form-reset" type="reset" style="display:none;" />
                                <div class="form-group">
                                    <label><font color="red">*</font>服务类别：</label>
                                    <input name="Name" type="text" class="Name form-control" />
                                </div>
                                <div class="form-group">
                                    <label><font color="red">*</font>前缀：</label>
                                    <input name="Prefix" type="text" class="Prefix form-control" />
                                </div>
                                <div class="form-group">
                                    <label><font color="red">*</font>排序：</label>
                                    <input name="Order" class="Order form-control" type="number" min="1" max="200000000" />
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="cancel btn btn-danger" data-dismiss="modal">取 消</button>
                    <button type="button" class="save btn btn-success">保 存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#categoryViewTable').bootstrapTable({
            url: window._util.BASE_URL + '/Maintain/QueryCategory',
            method: 'get',
            dataType: "json",
            cache: true,
            totalField: 'MaxRows',
            dataField: 'Items',
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            singleSelect: true,
            pagination: true, //分页
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 20,                       //每页的记录行数（*）
            pageList: [20, 50, 100, 200, 500],        //可供选择的每页的行数（*）
            search: false, //显示搜索框
            sidePagination: "server", //服务端处理分页
            clickToSelect: true,                //是否启用点击选中行
            showRefresh: false,                  //是否显示刷新按钮
            queryParams: function (params) {
                params["Name"] = $("#toolbar .query-name").val();
                return params;
            },
            columns: [
                {
                    checkbox: true,
                },
                {
                    field: 'Name',
                    title: '人员性质',
                    align: 'center',
                    hlign: 'center'
                },
                {
                    field: 'Order',
                    title: '排序',
                    align: 'center',
                    hlign: 'center'
                },
                {
                    title: '操作',
                    align: 'center',
                    hlign: 'center',
                    formatter: function (value, row, index) {
                        return '<button data-id="' + row.Id + '" class="edit btn btn-success"><i class="fa fa-edit fa-lg"></i> 编 辑</button>';
                    }
                }
            ]
        });
        //查询
        $("#toolbar .query").click(function () {
            $('#categoryViewTable').bootstrapTable('refresh');
        });
        //添加
        $("#toolbar button.add").click(function (args) {
            //表单重置
            $('#editForm input.cls-form-reset').click();
            $("#editForm input.Id").val(0);
            $("#editModal").modal({
                keyboard: true,
                show: true
            });
        });
        //编辑
        $("#categoryViewTable tbody").click(function (event) {
            var element = $(event.target);
            if (element.is("button.edit")) {
                var id = element.data("id");
                $.ajax({
                    url: window._util.BASE_URL + "/Maintain/GetCategory",
                    method: "GET",
                    dataType: "json",
                    data: "Id=" + id,
                    success: function (resp) {
                        if (resp != null) {
                            $("#editForm input.Id").val(resp.Id);
                            $("#editForm input.Name").val(resp.Name);
                            $("#editForm input.Prefix").val(resp.Prefix);
                            $("#editForm input.Order").val(resp.Order);

                            $("#editModal").modal({
                                keyboard: true,
                                show: true
                            });
                        } else {
                            alert("获取数据出错");
                        }
                    }
                }).fail(function (H, G) {
                    alert("浏览器超时未响应，请刷新重试");
                });
            }
        });

        //删除
        $("#toolbar button.delete").click(function () {
            var selections = $('#categoryViewTable').bootstrapTable('getSelections');
            if (selections != null && selections.length > 0) {
                var idArray = new Array();
                $.each(selections, function (ix, item) {
                    idArray.push(item.Id);
                });
                var jsonData = {
                    ids: idArray
                };
                $.ajax({
                    url: window._util.BASE_URL + "/Maintain/DeleteCategories",
                    method: "POST",
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    data: JSON.stringify(jsonData),
                    success: function (resp) {
                        if (resp != null && resp.Result) {
                            alert("删除成功");
                            $('#categoryViewTable').bootstrapTable('refresh');
                        } else {
                            alert("删除失败");
                        }
                    }
                }).fail(function (G, F) {
                    alert("浏览器超时未响应，请刷新重试");
                });
            }

        });
        //保存
        $("#editModal button.save").click(function () {
            $('#editForm').submit();
        });
        //表单编辑校验
        var validate = $("#editForm").validate({
            debug: false,
            focusInvalid: false,
            onkeyup: false,
            submitHandler: function (form) {
                var jsonData = $(form).serializeObject();
                $.ajax({
                    url: window._util.BASE_URL + "/Maintain/EditCategory",
                    method: "POST",
                    contentType: "application/json;charset=UTF-8",
                    async: true,
                    dataType: "json",
                    data: JSON.stringify(jsonData),
                    success: function (resp) {
                        if (resp != null && resp.Result) {
                            alert(resp.Message);
                            $('#categoryViewTable').bootstrapTable('refresh');
                            $("#editModal").modal('hide');
                        } else {
                            alert("保存失败");
                        }
                    }
                }).fail(function (G, F) {
                    alert("浏览器超时未响应，请刷新重试");
                });
                return false;
            },

            rules: {
                Name: {
                    required: true
                },
                Order: {
                    required: true,
                    digits: true,
                    range: [1, 2000000000]
                }
            },
            messages: {
                Name: {
                    required: "名称不能为空"
                },
                Order: {
                    required: "排序不能为空",
                    digits: "请输入正整数",
                    range: "请输入{0}-{1}之间的整数"
                }
            }

        });
    });

</script>